<template>
    <div class="bpm-header" :style="{'background-image':`url(${headerBg})`}">
        <div class="header-title">
            {{title}}
        </div>
        <div class="header-toolbar">
            <span class="header-icon">
                <img :src="user.sex == 'female' ?userImgWoman : userImgMan" alt="">
            </span>
            <span>{{user.fullName}}</span>
        </div>
    </div>
</template>

<script>
import woman from '../logo/woman.webp'
import man from '../logo/man2.webp'
import headerBg from "../logo/headerBg.png";
import userState from "@/assets/js/userState";
export default {
    name: "bpmHeader",
    mixins:[userState],
    props:{
        title:{
            default: ''
        }
    },

    data(){
        return {
            headerBg,
            userImgWoman:woman,
            userImgMan:man,
        }
    }
}
</script>

<style scoped>
.bpm-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    padding: 0 10px;
    background-color: #4285F4;
    background-repeat: no-repeat;
    background-position: top right;
    color: #fff;
}

.header-title{
    font-weight: bold;
}

.header-toolbar{
    display: flex;
    align-items: center;
}
.header-icon{
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 15px;
    vertical-align: middle;
    margin-right: 10px;
}
.header-icon >img{
    width: 100%;
    object-fit: cover;
}
</style>